<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>VTC - Holistic Programme Planning - HPP</title>
<script src="<s:url value="/js/jquery-1.4.2.js"/>" language="javascript1.5" type="text/javascript"></script>
<link id="screenBaseCss" rel="stylesheet" type="text/css" href="<s:url value="/css/screen.css"/>"/>
<script src="<s:url value="/js/ejs/Grid/GridE.js"/>" type="text/javascript"> </script>
<link href="<s:url value="/js/ejs/Styles/vtc.css"/>" rel="stylesheet" type="text/css" />
<link href="<s:url value="/css/vtc_screen.css"/>" rel="stylesheet" type="text/css" />
<link id="coreBaseCss" rel="stylesheet" type="text/css" href="<s:url value="/css/core.css"/>"/>
<script language="javascript1.5" type="text/javascript" src="<s:url value="/js/config.js"/>" ></script>
<script language="javascript1.5" type="text/javascript" src="<s:url value="/js/core.js"/>" ></script>
<script language="javascript1.5" type="text/javascript" src="<s:url value="/js/popup.js"/>" ></script>

<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link id="menuCSS" rel="stylesheet" type="text/css" href="../theme/color_6/css/menu.css"/>
<link id="screenCSS" rel="stylesheet" type="text/css" href="../theme/color_6/css/screen.css"/>
<style>
body {
	background:white !important;
}
</style>
</head>

<script>
var rgTR_index;
function addResourceGroup(){
	rgTR_index = rgTR_index+1;
	//alert(rgTR_index);
	var rgTR_Id="rg_"+rgTR_index;
	var rgItemTableId="grouopTotal_"+rgTR_index;
	
	var newRgTr =  $("#rgTR").clone();
	
	newRgTr.attr("id",rgTR_Id);
	
	newRgTr.find("#itemTable").attr("id",rgItemTableId);
	
	newRgTr.find("#item_total").attr("id","rgTotal_"+rgTR_index);
	
	newRgTr.find("#deleteRgBtn").click(function(){
		deleteRow(rgTR_Id);
	});
	
	newRgTr.find("#addRgiBut").click(function(){
		addResourceGroupItem(rgItemTableId);
	});
	//s
	// change name
	
	newRgTr.find("#curriculumHours").change(function(){
		changeValue(rgTR_index, 0);
	});
	
	newRgTr.find("#id").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].id");
	newRgTr.find("#name").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].name");
	newRgTr.find("#place").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].place");
	newRgTr.find("#servingCampus").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].servingCampus");
	newRgTr.find("#servingDept").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].servingDept");
	newRgTr.find("#curriculumHours").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].curriculumHours");
	newRgTr.find("#distribution").attr("name","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].distribution");
	
	// change id
	newRgTr.find("#id").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].id");
	newRgTr.find("#name").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].name");
	newRgTr.find("#place").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].place");
	newRgTr.find("#servingCampus").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].servingCampus");
	newRgTr.find("#servingDept").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].servingDept");
	newRgTr.find("#curriculumHours").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].curriculumHours");
	newRgTr.find("#distribution").attr("id","resourceGroupPage.resourceGroups["+rgTR_index+"].resourceGroupItems[0].distribution");
	
	$("#RG").append(newRgTr);
	//alert(newRgTr.html());
}

function deleteRow(rowId){
	$("#"+rowId).remove();
}



function addResourceGroupItem(grouopTotalId){
	//var rgiTR_index = $("#"+grouopTotalId).parent().children().size();
	
	//rgiTR_index = rgiTR_index - 2;
	var groups = grouopTotalId.split("_");
	var rg_index=parseInt(groups[1]);
	var _index = $("#"+grouopTotalId).parent().children().size();
	var _content = $("#"+grouopTotalId).parent().children().eq(_index-2);
	var _id =  _content.attr("id");
	
	var _ids = _id.split("_");
	
	var rgiTR_index =parseInt(_ids[3])+1;
	
	
	
	var rgiTR_Id= "rg_"+rg_index+"_rgi_"+rgiTR_index;
	var newRgiTr =  $("#rgiTR").clone();
	//alert("rgiTR_Id : "+rgiTR_Id);
	newRgiTr.attr("id",rgiTR_Id);
	newRgiTr.find("#deleteRgiBtn").click(function(){
		//$("#"+rgiTR_Id).remove();
		deleteRow(rgiTR_Id);
	});
	
	newRgiTr.find("#rgi_curriculumHours").change(function(){
		changeValue(rg_index, rgiTR_index);
	});
	
	newRgiTr.find("#rgi_servingCampus").attr("name","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].servingCampus");
	newRgiTr.find("#rgi_servingDept").attr("name","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].servingDept");
	newRgiTr.find("#rgi_curriculumHours").attr("name","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].curriculumHours");
	newRgiTr.find("#rgi_distribution").attr("name","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].distribution");
	
	
	newRgiTr.find("#rgi_servingCampus").attr("id","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].servingCampus");
	newRgiTr.find("#rgi_servingDept").attr("id","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].servingDept");
	newRgiTr.find("#rgi_curriculumHours").attr("id","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].curriculumHours");
	newRgiTr.find("#rgi_distribution").attr("id","resourceGroupPage.resourceGroups["+rg_index+"].resourceGroupItems["+rgiTR_index+"].distribution");
	
	
	
	newRgiTr.insertBefore("#"+grouopTotalId);
	
}

function isDigit()
{

   var key = window.event.keyCode;   
    if(key < 48 || key > 57){   
       window.event.keyCode = 0 ;
    }
}

function changeValue(rgRowIndex, rgiRowIndex){
	var duty = document.getElementById("resourceGroupPage.duty").value;
	var campus_db = "<s:property value='resourceGroupPage.campus' />";
	var department_db = "<s:property value='resourceGroupPage.department' />";
	var total_ch = "<s:property value='resourceGroupPage.curriculumHours' />";
	//alert("duty: "+duty+", campus_db: "+campus_db+",department_db: "+department_db);
	var curriculumHours = document.getElementById("resourceGroupPage.resourceGroups["+rgRowIndex+"].resourceGroupItems["+rgiRowIndex+"].curriculumHours").value;
	//alert("curriculumHours: "+curriculumHours +"--"+duty/100*curriculumHours);
	
	var campus = document.getElementById("resourceGroupPage.resourceGroups["+rgRowIndex+"].resourceGroupItems["+rgiRowIndex+"].servingCampus").value;
	var department = document.getElementById("resourceGroupPage.resourceGroups["+rgRowIndex+"].resourceGroupItems["+rgiRowIndex+"].servingDept").value;
	//alert("campus: "+campus+", department: "+department);
	var value = (1-duty/100)*curriculumHours;
	//alert(campus==campus_db);
	if(campus==campus_db && department==department_db){
		value = (1-duty/100)*curriculumHours+duty/100*total_ch;
	}
		
	document.getElementById("resourceGroupPage.resourceGroups["+rgRowIndex+"].resourceGroupItems["+rgiRowIndex+"].distribution").value=value;
	var index = $("#grouopTotal_"+rgRowIndex).parent().children().size();
	//alert("index: "+index);
	var totalValue=0;
	for(var i=0;i<index-2;i++){
		var i_value = document.getElementById("resourceGroupPage.resourceGroups["+rgRowIndex+"].resourceGroupItems["+i+"].curriculumHours").value;
		totalValue += parseInt(i_value);
	}
	document.getElementById("rgTotal_"+rgRowIndex).value=totalValue;
}

</script>

<body>
<div class="bodyBlank" >
  <div class="padding" > 
    <div class="bodyBlank2" >
    <s:form name="resourceGroupForm" id="resourceGroupForm" 
	        action="endorsement!saveResourceGroup.action?no-decorate=0" method="post">
	        <s:hidden id="resourceGroupPage.duty" name="resourceGroupPage.duty" value="%{resourceGroupPage.duty}"></s:hidden>
	        <s:hidden id="resourceGroupPage.level3PlanningId" name="resourceGroupPage.level3PlanningId" value="%{resourceGroupPage.level3PlanningId}"></s:hidden>
	        <s:hidden id="resourceGroupPage.programmePlanningItemId" name="resourceGroupPage.programmePlanningItemId" value="%{resourceGroupPage.programmePlanningItemId}"></s:hidden>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div class="pageTitle">Curriculum Hours Distribution Setup - Year 1</div></td>
          <td><label class="fLabel" style="font-weight:bold" >Academic Admin Duties : </label>
             <s:property value='resourceGroupPage.duty' /> %</td>
          <td style="width:60px"><div class="fField">
              <div class="button sbtn" >
                <div class="left" >
                  <div class="right" >
                    <input class="inputButton" type="button" id="" name="" value="Add" onclick="addResourceGroup()"/>
                  </div>
                </div>
              </div>
            </div></td>
        </tr>
      </table>

      <table id="RG" width="100%" border="0" cellspacing="0" cellpadding="0">
      <s:iterator value="resourceGroupPage.resourceGroups" var="resourceGroup" status="rg_status" >
		      <tr id="rg_${rg_status.index}">
		          <td>
		              <div class="form1">
		                <table border="0" cellspacing="0" cellpadding="0">
		                  <tr>
		                    <td><label class="fLabel" >Resources Group Name</label></td>
		                    <td><div class="fField">
		                    <input type="hidden" name="resourceGroupPage.resourceGroups[${rg_status.index}].id" value="<s:property value='#resourceGroup.id'/>"/>
		                    <input type="text" name="resourceGroupPage.resourceGroups[${rg_status.index}].name"  value="<s:property value='#resourceGroup.name'/>"  class="inputText" style="width: 150px"/>
		                      </div></td>
		                      <td><label class="fLabel" >Resources Group Place</label></td>
			                    <td><div class="fField">
			                        <input type="text"  name="resourceGroupPage.resourceGroups[${rg_status.index}].place" value="<s:property value='#resourceGroup.place'/>"  cass="inputText" style="width: 150px" onkeypress="isDigit()"/>
			                      </div></td>
			                    <td class="sTh" ><div class="button sbtn" >
		                        <div class="left" >
		                          <div class="right" >
		                            <input class="inputButton" type="button" value="<s:text name='common.btn.delete'/>" onclick="deleteRow('rg_${rg_status.index}')"/>
		                          </div>
		                        </div>
		                      </div></td>
		                  </tr>
		                </table>
		              </div>
		              <div class="sList" >
		                <table width="100%" class="sTable" cellpadding="0" cellspacing="0" border="0" >
		                  <tr>
		                    <td class="sTh" style="width:150px" >Serving Campus <img class="star" src="../images/spacer.gif" /></td>
		                    <td class="sTh" style="width:150px" >Serving Dept./Unit</td>
		                    <td class="sTh" >Curriculum Hours</td>
		                    <td class="sTh" >Distribution of Curriculum Hours</td>
		                    <td class="sTh" ><div class="button sbtn" >
		                        <div class="left" >
		                          <div class="right" >
		                            <input class="inputButton" type="button" id="" name="" value="Add" onclick="addResourceGroupItem('grouopTotal_${rg_status.index}')"/>
		                          </div>
		                        </div>
		                      </div></td>
		                  </tr>
		                  <s:iterator  value="#resourceGroup.resourceGroupItems" var="resourceGroupItem" status="rgi_status" >
			                  <tr class="sRow2" id="rg_${rg_status.index}_rgi_${rgi_status.index}" >
			                    <td class="sCell" >
			                    	<select name="resourceGroupPage.resourceGroups[${rg_status.index}].resourceGroupItems[${rgi_status.index}].servingCampus" class="inputSelect"
									style="width: 150px"   value="<s:property value='#resourceGroupItem.servingCampus'/>" 
									 <option value="" >- Select -</option>
			                			<option value="Bureau1" >VTC Campus 2</option>
		              			</select>
			                      </td>
			                    <td class="sCell" >
			                    <select name="resourceGroupPage.resourceGroups[${rg_status.index}].resourceGroupItems[${rgi_status.index}].servingDept" class="inputSelect"
									cssStyle="width: 150px"   value="<s:property value='#resourceGroupItem.servingDept'/>" 
									<option value="" >- Select -</option>
			                			<option value="Bureau1" >VTC Campus 2</option>
		              			</select>
			                      </td>
			                    <td class="sCell" >
			                    <input type="text"  id="resourceGroupPage.resourceGroups[${rg_status.index}].resourceGroupItems[${rgi_status.index}].curriculumHours" 
			                    name="resourceGroupPage.resourceGroups[${rg_status.index}].resourceGroupItems[${rgi_status.index}].curriculumHours" class="inputText"
									style="width: 100px"  value="<s:property value='#resourceGroupItem.curriculumHours'/>"   onkeypress="isDigit()" onchange="changeValue(${rg_status.index},${rgi_status.index})"/>
			                    </td>
			                    <td class="sCell" >
			                    <input type="text"  id="resourceGroupPage.resourceGroups[${rg_status.index}].resourceGroupItems[${rgi_status.index}].distribution" 
			                    name="resourceGroupPage.resourceGroups[${rg_status.index}].resourceGroupItems[${rgi_status.index}].distribution" class="inputText"
									style="width: 100px"   value="<s:property value='#resourceGroupItem.distribution'/>"  readonly="readonly"/>
			                    </td>		                    
			                    <td class="sCell buttonCell" ><div class="button sbtn" >
			                        <div class="left" >
			                          <div class="right" >
			                            <input class="inputButton" type="button" id="" value="<s:text name='common.btn.delete'/>" onclick="deleteRow('rg_${rg_status.index}_rgi_${rgi_status.index}')"/>
			                          </div>
			                        </div>
			                      </div></td>
			                  </tr>
		                  </s:iterator>
		                  <tr class="sRow2" id="grouopTotal_${rg_status.index}">
		                    <td class="sCell" >&nbsp;</td>
		                    <td class="sCell b r" style="width:200px" >Resource Group Total</td>
		                    <td class="sCell" ><input class="inputText" type="text" id="rgTotal_${rg_status.index}" name="" value="" style="width:100px" disabled="disabled"/></td>
		                    <td class="sCell" >&nbsp;</td>
		                    <td class="sCell" >&nbsp;</td>
		                  </tr>
		                </table>
		              </div>
		            </td>
		        </tr>
		        </s:iterator>
      </table>
     
      
      <table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="red">
	    <tr>
          <td><div class="sListBorder" >
              <div class="sList" >
                <table width="100%" class="sTable" cellpadding="0" cellspacing="0" border="0" >
                  <tr class="sRow2" >
                    <td class="sCell" style="width:150px" ></td>
                    <td class="sCell b r" style="width:200px" >Target Total</td>
                    <td class="sCell" >
                    <input class="inputText" type="text" id="" name="resourceGroupPage.curriculumHours" value="<s:property value='resourceGroupPage.curriculumHours'/>" style="width:100px" disabled="disabled"/></td>
                  </tr>
                </table>
              </div>
            </div></td>
        </tr>
        <tr>
          <td><label class="noteRed"> * Denotes Operating Unit would be granted X % to cater for academic admin duties. </label>
            <div class="btnSet btnSetTypeB">
              <div class="left" >
                <div class="button" >
                  <div class="left" >
                    <div class="right" >
                      <input class="inputButton" type="submit" id="" name="" value="Save" />
                    </div>
                  </div>
                </div>
                <div class="button" >
                  <div class="left" >
                    <div class="right" >
                      <input class="inputButton" type="button" id="" name="" value="Cancel" onclick="CE.close()"/>
                    </div>
                  </div>
                </div>
              </div>
            </div></td>
        </tr>
	  </table>
	  </s:form>
<!-- 	  copy  tr  cccccccccccccccccccc-->
 	<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="red" style="display:none" >
        <tr id="rgTR" >
          <td><div class="sListBorder" >
              <div class="form1">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><label class="fLabel" >Resources Group Name</label></td>
                    <td><div class="fField">
                        <s:textfield name="name" id="name"  cssClass="inputText" cssStyle="width: 150px"/>
                      </div></td><td><label class="fLabel" >Resources Group Place</label></td>
                    <td><div class="fField">
                        <s:textfield name="place" id="place" cssClass="inputText" cssStyle="width: 150px" onkeypress="isDigit()"/>
                      </div></td>
                    <td class="sTh" ><div class="button sbtn" >
                        <div class="left" >
                          <div class="right" >
                          	<s:hidden id="id" name="id"></s:hidden>
                            <input class="inputButton" type="button" id="deleteRgBtn" name="" value="<s:text name='common.btn.delete'/>" />
                          </div>
                        </div>
                      </div></td>
                  </tr>
                </table>
              </div>
              <div class="sList" >
                <table width="100%" class="sTable" cellpadding="0" cellspacing="0" border="0" >
                  <tr>
                    <td class="sTh" style="width:150px" >Serving Campus <img class="star" src="../images/spacer.gif" /></td>
                    <td class="sTh" style="width:150px" >Serving Dept./Unit</td>
                    <td class="sTh" >Curriculum Hours</td>
                    <td class="sTh" >Distribution of Curriculum Hours</td>
                    <td class="sTh" >
                            <input class="inputButton" type="button" id="addRgiBut" name="add" value="Add" />
					</td>
                  </tr>
                  <tr class="sRow2" >
                    <td class="sCell" >
                     <s:select name="servingCampus" id="servingCampus" cssClass="inputSelect"
									cssStyle="width: 150px"
									list="#{'All':'- Select -','Bureau1':'Bureau1','Bureau2':'Bureau2'}"></s:select> 
                      </td>
                    <td class="sCell" >
                     <s:select name="servingDept" id="servingDept" cssClass="inputSelect"
									cssStyle="width: 150px"
									list="#{'All':'- Select -','Bureau1':'Bureau1','Bureau2':'Bureau2'}"></s:select> 
                      </td>
                    <td class="sCell" >
                    <s:textfield name="curriculumHours" id="curriculumHours" cssClass="inputText" cssStyle="width: 150px" onkeypress="isDigit()"/>
                    </td>
                    <td class="sCell" >
                    <s:textfield name="distribution" id="distribution" cssClass="inputText" cssStyle="width: 150px" readonly="true"/>
                    </td>
                    <td class="sCell buttonCell" >
                            <input class="inputButton" type="button" id="deleteRgiBut0" name="" value="<s:text name='common.btn.delete'/>" />
					  </td>
                  </tr>
                  <tr class="sRow2"  id="itemTable">
                    <td class="sCell" >&nbsp;</td>
                    <td class="sCell b r" style="width:200px" >Resource Group Total</td>
                    <td class="sCell" ><input class="inputText" type="text" id="item_total" name="" value="" style="width:100px" disabled="disabled"/></td>
                    <td class="sCell" >&nbsp;</td>
                    <td class="sCell" >&nbsp;</td>
                  </tr>
                </table>
              </div>
            </div></td>
        </tr>
      </table>
	   <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="red" style="display:none" >
        <tr id="rgiTR" class="sRow2" >
                    <td class="sCell" >
                     <s:select name="rgi_servingCampus" cssClass="inputSelect" id="rgi_servingCampus"
									cssStyle="width: 150px"
									list="#{'All':'- Select -','Bureau1':'Bureau1','Bureau2':'Bureau2'}"></s:select> 
                      </td>
                    <td class="sCell" >
                    <s:select name="rgi_servingDept" cssClass="inputSelect" id="rgi_servingDept" 
									cssStyle="width: 150px"
									list="#{'All':'- Select -','Bureau1':'Bureau1','Bureau2':'Bureau2'}"></s:select>
					 </td>
                    <td class="sCell" >
                    <s:textfield name="rgi_curriculumHours" id="rgi_curriculumHours" cssClass="inputText" cssStyle="width: 150px" onkeypress="isDigit()"/>
                    </td>
                    <td class="sCell" >
                    <s:textfield name="rgi_distribution" id="rgi_distribution" cssClass="inputText" cssStyle="width: 150px" readonly="true"/>
                    </td>
                    <td class="sCell buttonCell" ><div class="button sbtn" >
                        <div class="left" >
                          <div class="right" >
                            <input class="inputButton" type="button" id="deleteRgiBtn" name="" value="<s:text name='common.btn.delete'/>" />
                          </div>
                        </div>
                      </div></td>
                  </tr>
		</table>
    </div>
    <!-- InstanceEndEditable --> </div>
</div>
</body>
<!-- InstanceEnd -->
</html>
<script>

     var rgs = "<s:property value='resourceGroupPage.resourceGroupSize' />";
     if(rgs=="0" || rgs==null || rgs==""){
    	 rgTR_index = -1;
    	 addResourceGroup(); 
     }else{
    	 rgTR_index = rgs-1;

    	 for(var j=0;j<=rgTR_index;j++){
   			 var index = $("#grouopTotal_"+j).parent().children().size();
   			 var totalValue=0;
   			for(var i=0;i<index-2;i++){
   				var i_value = document.getElementById("resourceGroupPage.resourceGroups["+j+"].resourceGroupItems["+i+"].curriculumHours").value;
   				totalValue += parseInt(i_value);
   			}
   			document.getElementById("rgTotal_"+j).value=totalValue;
    	 }
     }
     	      	
	 </script> 
